<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header class="fixed top-0 left-0 w-full h-12vw bg-blue-500 text-white text-4.8vw z-1000 flex justify-center items-center">
      <p>商家信息</p>
    </header>

    <!-- 商家logo部分 -->
    <div class="business-logo mt-12vw flex justify-center items-center">
      <img :src="businessInfo.image" class="w-40vw h-30vw rounded" alt="商家图片">
    </div>

    <!-- 商家信息部分 -->
    <div class="business-info w-full h-20vw flex flex-col justify-center items-center">
      <h1 class="text-5vw">{{ businessInfo.name }}</h1>
      <p class="text-3vw text-gray-500 mt-1vw">&#165;{{ businessInfo.minPrice }}起送 | &#165;{{ businessInfo.deliveryFee }}配送</p>
      <p class="text-3vw text-gray-500 mt-1vw">{{ businessInfo.description }}</p>
    </div>

    <!-- 食品列表部分 -->
    <ul class="food w-full mb-14vw">
      <li
          v-for="(item, index) in foodItems"
          :key="index"
          class="w-full box-border p-2.5vw flex justify-between items-center"
      >
        <div class="food-left flex items-center">
          <img :src="item.image" class="w-20vw h-20vw" alt="食品图片">
          <div class="food-left-info ml-3vw">
            <h3 class="text-3.8vw text-gray-700">{{ item.name }}</h3>
            <p class="text-3vw text-gray-500 mt-2vw">{{ item.description }}</p>
          </div>
        </div>
        <div class="food-right w-16vw flex justify-between items-center">
          <i
              class="fa fa-minus-circle text-5.5vw text-gray-400 cursor-pointer"
              @click="decreaseQuantity(index)"
          ></i>
          <p class="text-3.6vw text-gray-700">{{ item.quantity }}</p>
          <i
              class="fa fa-plus-circle text-5.5vw text-blue-500 cursor-pointer"
              @click="increaseQuantity(index)"
          ></i>
        </div>
      </li>
    </ul>

    <!-- 购物车部分 -->
    <div class="wrapper">
      <!-- ... 其他代码保持不变 ... -->

      <!-- 购物车部分 -->
      <div class="cart fixed bottom-0 left-0 w-full h-14vw flex">
        <div class="cart-left flex-2 bg-gray-600 flex">
          <!-- ... 购物车左侧内容 ... -->
        </div>
        <div
            class="cart-right flex-1"
            :class="{'bg-green-500': isMinPriceReached, 'bg-gray-600': !isMinPriceReached}"
        >
          <div
              class="cart-right-item w-full h-full text-white text-4.5vw font-700 flex justify-center items-center cursor-pointer"
              @click="checkout"
          >
            {{ isMinPriceReached ? '去结算' : `差¥${minPriceDiff}起送` }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import router from "@/router";

// 商家信息
const businessInfo = ref({
  id: 1,
  name: '万家饺子（软件园E18店）',
  minPrice: 15,
  deliveryFee: 3,
  description: '各种饺子炒菜',
  image: '/img/sj01.png'
})

// 食品列表
const foodItems = ref([
  {
    id: 1,
    name: '猪肉白菜饺子',
    description: '15个/份',
    price: 18,
    quantity: 0,
    image: '/img/sp01.png'
  },
  {
    id: 2,
    name: '三鲜饺子',
    description: '15个/份',
    price: 20,
    quantity: 0,
    image: '/img/sp02.png'
  },
  {
    id: 3,
    name: '酸菜猪肉饺子',
    description: '15个/份',
    price: 16,
    quantity: 0,
    image: '/img/sp03.png'
  },
  {
    id: 4,
    name: '韭菜鸡蛋饺子',
    description: '15个/份',
    price: 15,
    quantity: 0,
    image: '/img/sp04.png'
  }
])

// 增加食品数量
const increaseQuantity = (index: number) => {
  foodItems.value[index].quantity += 1
}

// 减少食品数量
const decreaseQuantity = (index: number) => {
  if (foodItems.value[index].quantity > 0) {
    foodItems.value[index].quantity -= 1
  }
}


// 计算总价格
const totalPrice = computed(() => {
  return foodItems.value.reduce((total, item) => total + (item.price * item.quantity), 0)
})

// 检查是否达到起送价
const isMinPriceReached = computed(() => {
  return totalPrice.value >= businessInfo.value.minPrice
})

// 计算距离起送价还差多少
const minPriceDiff = computed(() => {
  return businessInfo.value.minPrice - totalPrice.value
})

// 结算功能
const checkout = () => {
  if (isMinPriceReached.value) {
    // 构造订单数据
    const orderData = {
      business: businessInfo.value,
      items: foodItems.value.filter(item => item.quantity > 0),
      total: totalPrice.value + businessInfo.value.deliveryFee
    }

    // 跳转到订单页面
    router.push({
      name: 'order',
      state: { orderData }
    })
  } else {
    alert(`还差¥${minPriceDiff.value}元起送`)
  }
}
</script>

